<template>
  <el-dialog
    :visible.sync="visible"
    title="导入餐补积分"
    width="400px"
    destroy-on-close
  >
    <el-form
      v-loading.fullscreen.lock="loading"
      element-loading-text="导入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="form"
      size="small"
      :model="formData"
      label-position="left"
    >
      <el-form-item prop="mealType" label="积分类型">
        <el-select v-model="formData.mealType" style="width: 100%">
          <el-option
            v-for="item in dict.MEALTYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-upload
        :action="action"
        accept=".xls,.xlsx"
        :data="formData"
        :headers="headers"
        :limit="1"
        drag
        :on-change="handleUpChange"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
    </el-form>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadPoints',
  dicts: ['MEALTYPE'],
  computed: {
    ...mapGetters(['databaseUploadApi']),
  },
  props: {
    successAfter: Function,
  },
  data() {
    return {
      visible: false,
      loading: false,
      headers: {
        Authorization: getToken(),
      },
      formData: {
        mealType: '1',
      },
      action:
        process.env.VUE_APP_BASE_API + '/mealCompensationPoints/pointsImport',
    }
  },
  created() {
    console.log(process.env.VUE_APP_BASE_API, 'process.env.VUE_APP_BASE')
  },
  methods: {
    beforeUpload(file) {
      const isExcel =
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件')
        return false
      }
      this.loading = true
      return true
    },
    handleUpChange(file) {
      if (file.status === 'success') {
        this.successAfter && this.successAfter()
        this.loading = false
        this.visible = false
        this.$message.success('导入成功！')
      } else if (file.status === 'fail') {
        this.loading = false
        this.$message.error('导入失败！')
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
